/*  iframe.html */
.iframe-container .custom-app{
  height: 100%;
  width: 100%;
}
.custom-container{
  width: 100%;
  height: 100%;
}
.page{
  overflow-y: auto;
}
.component{
  position: relative;
  
}
.content{
  position: relative;
  overflow: initial;
}
.bar, .bar::after{
  position: relative;
}
.line{
  margin: 5px;
  height: 6px;
  background: #ddd;
  border-radius: 3px; 
  box-sizing: border-box;
}
.line.target{
  background: #bbb;
}
.component.active{
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24);
  border: 1px solid #C0C0C0;
  margin: 2px;
}
.component .control-wrap .name,
.component .control-wrap .control-buttons{
  position: absolute;
  display: inline-block;
  z-index: 100;
  top: 0;
  height: 30px;
  transition: all .4s;
  opacity: 0;
  background: #fff;
}
.component.active .control-wrap .name,
.component.active .control-wrap .control-buttons{
  transform: translate3d(0, -32px, 0);
  opacity: 1;
}
.component .control-wrap .name {
  left: 0;
  padding: 0 5px;
  line-height: 30px;
}
.component .control-wrap .control-buttons{
  right: 0;
  font-size: 0;
}
.component .control-wrap .control-buttons .icons{
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  padding: 5px;
  cursor: pointer;
}
.component .control-wrap .control-buttons .icons::after{
  display: block;
  position: absolute;
  content: '';
  width: 18px;
  height: 18px;
  background: url('../images/icons_edit.png') no-repeat;
}
.component .control-wrap .control-buttons .icons.edit::after {
  background-position: 0 0;
}
.component .control-wrap .control-buttons .icons.move-top::after {
  background-position: 0 -18px;
}
.component .control-wrap .control-buttons .icons.move-down::after {
  background-position: 0 -36px;
}
.component .control-wrap .control-buttons .icons.delete::after {
  background-position: 0 -54px;
}
.page-content {
  position: relative;
  width: 100%;
  height: 100%;
}